<template>
  <div id="login">
    <div class="submit">
      <div class="Tox">
        <img
          @click="index = i"
          :class="index == i ? 'acive' : ''"
          v-for="(v, i) in imgdata"
          :key="i"
          :src="v"
          alt=""
        />
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field name="radio" label="单选框">
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="01">用户</van-radio>
              <van-radio name="02">客服</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { GoLogin } from "@/api/request";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      username: "",
      password: "",
      radio: "01",
      index: 0,
      imgdata: ["/img/Default.jpg", "/img/索大.gif", "/img/头像.jpg"],
    };
  },
  methods: {
    // 解构vuex
    ...mapActions("login", ["getUserInfosync"]),
    onSubmit(values) {
      GoLogin({
        // 字段名验证
        account: this.username,
        password: this.password,
      }).then((res) => {
        this.$message({
          message: res.status == 200 ? "登陆成功" : res.msg,
          type: res.status == 200 ? "success" : "error",
          duration: 1000,
        });
        // 判断状态码是否是200
        if (res.status == 200) {
          this.getUserInfosync(res.data);

          let { username, radio } = values;
          let img = this.imgdata[this.index];
          let userInfos = {
            username,
            radio,
            img,
          };
          console.log(values);
          localStorage.setItem("userInfos", JSON.stringify(userInfos));
          localStorage.setItem("token", res.data.data.token);
          this.$router.push("/index");
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
}
.van-button {
  background: red;
  border: none;
}
.submit {
  padding: 5% 3%;
  margin-top: 55%;
}
.Tox {
  display: flex;
  justify-content: space-around;
  img {
    width: 20%;
    border-radius: 50px;
    margin-top: -5%;
  }
  .acive {
    border: solid 2px red;
  }
}
</style>